<template>
  <el-form
    ref="ruleForm"
    :rules="rules"
    :model="addModel"
    label-position="left"
    label-width="96px"
  >
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in firstItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in secondItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
            <!-- 日期 -->
            <el-date-picker
              v-if="item.type === 'data'"
              v-model="addModel[item.prop]"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              :style="{ width: '100%' }"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in thirdItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <el-form-item
      v-for="item in fourthItemList"
      :key="item.type"
      :label="item.label"
      class="dynamic-item"
    >
      <!-- 厨房 -->
      <Kitchen v-if="item.type === 'Kitchen'" :model="addModel" />
      <!-- 燃料类型 -->
      <Fuel v-if="item.type === 'Fuel'" :model="addModel" />
      <!-- 饮水 -->
      <Water v-if="item.type === 'Water'" :model="addModel" />
      <!-- 厕所 -->
      <Toilet v-if="item.type === 'Toilet'" :model="addModel" />
      <!-- 禽畜栏 -->
      <Poultry v-if="item.type === 'Poultry'" :model="addModel" />
    </el-form-item>
    <div class="dynamic-item">
      <vxe-table
        border
        :align="allAlign"
        show-header-overflow
        show-overflow
        highlight-hover-row
        :data="tableData"
      >
        <vxe-table-column type="seq" title="序号" width="60" />
        <vxe-table-column field="name" title="姓名" width="100" />
        <vxe-table-column field="sex" title="性别" width="100" />
        <vxe-table-column field="birthdata" title="出生日期" width="150" />
        <vxe-table-column field="identityNumber" title="身份证号" width="200" />
        <vxe-table-column field="relationship" title="家庭关系" width="150" />
        <vxe-table-column
          title="操作"
          width="150px"
          align="center"
          show-overflow
        >
          <template v-slot="scope">
            <el-tooltip content="修改" placement="top" effect="light">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="AddHandleBtn(scope)"
              />
            </el-tooltip>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
  </el-form>
</template>

<script>
import Kitchen from "@/components/CommonForm/form-item/Kitchen.vue"
import Fuel from "@/components/CommonForm/form-item/Fuel.vue"
import Water from "@/components/CommonForm/form-item/Water.vue"
import Toilet from "@/components/CommonForm/form-item/Toilet.vue"
import Poultry from "@/components/CommonForm/form-item/Poultry.vue"

import { validatePhone } from "@/simdata/validate.js"
// 手机号的验证
const checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("手机号不能为空"))
  } else {
    if (validatePhone(value)) {
      callback()
    } else {
      return callback(new Error("请输入正确的手机号"))
    }
  }
}
export default {
  components: {
    Kitchen,
    Fuel,
    Water,
    Toilet,
    Poultry
  },
  data() {
    return {
      // 弹框新增字段
      addModel: {
        name: "", // 姓名
        identityNumber: "", // 身份证
        population: "",
        phonenumber: "",
        createDate: "",
        number: "",
        nowAddress: "",
        HouseNumber: "",
        detailedAddress: "", // 详细地址
        kitchenList: [],
        fuelList: [],
        waterList: [],
        toiletList: [],
        poultryList: []
      },
      // 新增字段验证
      rules: {
        name: [{ required: true, message: "请输入户主姓名", trigger: "blur" }],
        identityNumber: [
          { required: true, message: "请输入户主身份证", trigger: "blur" }
        ],
        population: [
          { required: true, message: "请输入家庭人口数", trigger: "blur" }
        ],
        phonenumber: [
          { required: true, validator: checkPhone, trigger: "blur" }
        ],
        createDate: [
          { required: true, message: "请选择建档日期", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请输入家庭档案号", trigger: "blur" }
        ],
        nowAddress: [
          { required: true, message: "请输入家庭住址", trigger: "blur" }
        ],
        HouseNumber: [
          { required: true, message: "请输入门牌号码/组", trigger: "blur" }
        ]
      },
      // 配置的表单
      firstItemList: [
        {
          type: "Input",
          label: "户主姓名",
          prop: "name",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "户主身份证",
          prop: "identityNumber",
          span: 8,
          classType: "IdCard",
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭人口数",
          prop: "population",
          span: 8,
          placeholder: ""
        }
      ],
      secondItemList: [
        {
          type: "Input",
          label: "联系电话",
          prop: "phonenumber",
          span: 8,
          placeholder: ""
        },
        {
          type: "data",
          label: "建档日期",
          prop: "createDate",
          span: 8,
          placeholder: "请选择..."
        },
        {
          type: "Input",
          label: "家庭档案号",
          prop: "number",
          span: 8,
          placeholder: ""
        }
      ],
      thirdItemList: [
        {
          type: "Input",
          label: "家庭住址",
          prop: "nowAddress",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "门牌号码/组",
          prop: "HouseNumber",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "家庭详细地址",
          prop: "detailedAddress",
          span: 8,
          placeholder: ""
        }
      ],
      fourthItemList: [
        {
          type: "Kitchen",
          label: "厨房排风设施",
          span: 24
        },
        {
          type: "Fuel",
          label: "燃\u2002料\u2002\u2002类\u2002型",
          span: 24
        },
        {
          type: "Water",
          label: "饮\u3000\u3000\u3000\u3000水",
          span: 24
        },
        {
          type: "Toilet",
          label: "厕\u3000\u3000\u3000\u3000所",
          span: 24
        },
        {
          type: "Poultry",
          label: "禽\u3000畜\u3000栏",
          span: 24
        }
      ],
      allAlign: null,
      tableData: [
        {
          id: 10001,
          name: "张三",
          birthdata: "1989-07-15",
          identityNumber: "429005198907156973",
          sex: "男",
          age: 32,
          relationship: "子"
        },
        {
          id: 10002,
          name: "李四",
          birthdata: "1958-04-25",
          identityNumber: "422429195804256982",
          sex: "女",
          age: 63,
          relationship: "本人"
        }
      ]
    }
  },
  methods: {
    // 关闭弹框
    // addDialogClosed() {
    //   this.dialog_test_show = false
    //   // 重置表单
    //   this.$refs.ruleForm.resetForm()
    // },
    // // 点击确定
    // submit() {
    //   this.submitHandle()
    // },
    // 点击table按钮
    AddHandleBtn(scope) {},
    // 重置表单
    resetForm() {
      this.$nextTick(() => {
        this.$refs["ruleForm"].resetFields()
      })
    },
    // 点击确定提交
    submitHandle() {
      // this.$refs["ruleForm"].validate(valid => {
      //   if (valid) {
      //     console.log("调用aip接口")
      //   } else {
      //     return false
      //   }
      // })
    }
  }
}
</script>
<style lang="scss" scoped></style>
